<template>
    <div class="con_bg">
        <div class="game-main k3">
            <div class="betTitle">
                <div class="betlogo left">
                    <img src="https://www.018381.com/themes/simpleboot3/public/assets/game/images/nsc/warp/icon/bjpk10.png" width="114" height="114" />
                </div> 
                <div class="lottery_timer left">
                    <div class="lottery_issue left">
                        <h3 class="lottery-name _black">北京pk10</h3>
                        <p style="color:#666;" class="_black">第 <span id="current_issue" class="_red">20181006025</span> 期</p>
                        <p class="_black">总共：<span class="_red">96</span> 期</p>
                        <a class="code-step" href="/zst/12" target="_blank">走势分析</a>
                    </div>
                    <div class="lottery_timeBox left">
                        <p class="time-title">已开盘,距离投注截止还有</p>
                        <div class="timeBox">
                            <div class="num_left">
                                <div class="num num_t">
                                    <div id="s1s">0</div>
                                </div>
                                <div class="num num_b">
                                    <div id="s1x">0</div>
                                </div>
                            </div>
                            <div class="num_right">
                                <div class="num num_t">
                                    <div id="s2s">0</div>
                                </div>
                                <div class="num num_b">
                                    <div id="s2x">0</div>
                                </div>
                            </div>
                        </div>
                        <div class="dianBox"></div>
                        <div class="timeBox">
                            <div class="num_left">
                                <div class="num num_t">
                                    <div id="f1s">0</div>
                                </div>
                                <div class="num num_b">
                                    <div id="f1x">0</div>
                                </div>
                            </div>
                            <div class="num_right">
                                <div class="num num_t">
                                    <div id="f2s">4</div>
                                </div>
                                <div class="num num_b">
                                    <div id="f2x">4</div>
                                </div>
                            </div>
                        </div>
                        <div class="dianBox"></div>
                        <div class="timeBox">
                            <!--<div class="time_line"></div>-->
                            <div class="num_left">
                                <div class="num num_t">
                                    <div id="m1s">3</div>
                                </div>
                                <div class="num num_b">
                                    <div id="m1x">3</div>
                                </div>
                            </div>
                            <div class="num_right">
                                <div class="num num_t">
                                    <div id="m2s">8</div>
                                </div>
                                <div class="num num_b">
                                    <div id="m2x">8</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lottery_tab right">
                    <div class="td">
                        <ul>
                            <li  @click="changeHistory(1)" :class="historyChange==1?'on':''"><span>近一期</span></li>
                            <li  @click="changeHistory(5)" :class="historyChange==5?'on':''"><span>近五期</span></li>
                        </ul>
                    </div>
                    <div class="bd">
                        <div class="lottery_num" v-if="historyChange==1">
                            <p class="lottery_history_issue">第 <span>20181006042</span> 期</p>
                            <div class="lottery_num_box" >
                                <ul id="num">
                                    <li v-for="(item,index) in pkNum" :key="index" :class="'car'+item"><span style="top: 0px;">{{item}}</span></li>
                                </ul>
                            </div>
                            <div class="louhao">
                                <a class="wanfa" href="/zst/12" target="_blank">走势分析</a>
                            </div>
                        </div>
                        <div class="lottery_num" v-if="historyChange==5">
                            <Row class="qwList">
                                <Col  class="iLi"  span="8">第<span>201810080617</span>期</col>
                                <Col class="iLi" span="16">
                                    <i v-for="(item,index) in pkNum" :key="index" :class="'car'+item">{{item}}</i>
                                </col>
                            </Row>
                        </div>
                    </div>
                </div>
            </div>
            <!--金额控制-->
            <div class="sum-ctrl">
                <div class="sum-title">
                    <ul>
                        <li @click="changeBet('lmp')" :class="panTab=='lmp'?'on':''">两面盘</li>
                        <li @click="changeBet('gyh')" :class="panTab=='gyh'?'on':''">冠亚组合</li>
                        <li @click="changeBet('qw')" :class="panTab=='qw'?'on':''">1-5名</li>
                        <li @click="changeBet('hw')" :class="panTab=='hw'?'on':''">6-10名</li>
                    </ul>
                </div>
                <div class="sun-con">
                    <Button v-for="item in manyCtrl" :key="item" style="margin-left:15px;" @click="changeSum(item)">{{item}}</Button>
                    <label>预设金额:<input type="number" v-model="sumMany"/></label>
                </div>
            </div>
            <!--下注面板-->
            <div class="pad" >
                <lmpTable v-if="panTab=='lmp'"/>
                <gyhTable v-if="panTab=='gyh'"/>
                <qwTable v-if="panTab=='qw'"/>
                <hwTable v-if="panTab=='hw'"/>
            </div>
            
            <lotteryHistory />
            <clientSide />
        </div>
        <div class="clear"></div>
    </div>
</template>

<script>
import lotteryHistory from "@/components/game/lotteryHistory";//历史下注纪录
import clientSide from "@/components/game/clientSide";//下载客户端

import lmpTable from "@/components/pk10/lmpTable";//两面盘
import gyhTable from "@/components/pk10/gyhTable";//冠亚和
import qwTable from "@/components/pk10/qwTable";//前五盘
import hwTable from "@/components/pk10/hwTable";//后五盘
import {Button,Row,Col} from 'iView'
export default {
    name:"pk10",
    data(){
        return{
            historyChange:1,//判断往期中奖“1”为近一期，“5”为近五期
            panTab:"lmp",//下注组件切换“all”为整合,“lmp”为两面盘
            pkNum:[2,3,4,1,5,6,7,8,9,10],//pk10开奖号码
            lottery5:[
                    {
                        title: '期数',
                        key: 'lotteryPeriods'
                    },
                    {
                        title: '开奖号码',
                        key: 'lotteryNumber'
                    },
                    {
                        title: '总和',
                        key: 'total'
                    },
                    {
                        title: '龙虎',
                        key: 'pred'
                    },
                    {
                        title: '大小',
                        key: 'size'
                    },
                    {
                        title: '单双',
                        key: 'firstsd'
                    }
                ],
            dataLottery5:[
                {
                    lotteryPeriods: '20181006045',
                    lotteryNumber: "4,6,6,7,8",
                    pred: '虎',
                    total: '26',
                    size: '大',
                    firstsd: '单'
                },
            ],
            manyCtrl:[10,50,100,500,1000,5000,10000],
            sumMany:null,//投注预设金额
        }
    },
    components:{
        lmpTable,
        gyhTable,
        qwTable,
        hwTable,
        lotteryHistory,
        clientSide,
        Button,
        Row,
        Col
    },
    methods:{
        setMoge(){//近五期中奖假数据
        let _this = this;
            this.$http.post("/5ad6fee0d27d541368255cdb/example/dataLottery5").then(res => {
                _this.dataLottery5 = res.data.data.projects; 
            })
        },
        //预设金额
        changeSum:function(num){
            if(this.sumMany == num){
                this.sumMany = null;
            }else{
                this.sumMany = num;
            }
            
        },
        //往期历史标签页
        changeHistory:function(num){
            this.historyChange = num;
        },
        //切换下注方式
        changeBet:function(str){
            this.panTab = str;
        }
    },
    created(){
        this.setMoge();
        
    },
    mounted(){

    }
}
</script>

<style scoped>
.qwList .iLi i{
    display: inline-block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: 3px;
    font-style: normal;
    font-size: 12px;
    color: #FFF;
}
.qwList .iLi span{
    color: #12b35e;
}
.car1{
    background: #cfcf00!important;
}
.car2{
    background: #3b92d9!important;
}
.car3{
    background: #4b4b4b!important;
}
.car4{
    background: #f07c31!important;
}
.car5{
    background: #65dfe4!important;
}
.car6{
    background: #4742f4!important;
}
.car7{
    background: #bfbfbf!important;
}
.car8{
    background: #e84122!important;
}
.car9{
    background: #6e180b!important;
}
.car10{
    background: #57ba3b!important;
}

.pad{
    padding: 15px;
}
.con_bg{
    background-color: #f6f6f6;
}
.clear{
    width: 100%;
    clear: both;
}
/*金额控制*/
.sum-ctrl .sum-title{
    height: 36px;
    background: url(http://119.28.54.66:9031/themes/simpleboot3/public/assets/game/images/unit_bg.jpg) repeat-x;
}
.sum-ctrl .sum-title ul li {
    border: none;
    color: #666;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    float: left;
    line-height: 36px;
    padding: 0 10px;
    position: relative;
}
.sum-ctrl .sum-title ul li:hover{
    background: url(http://119.28.54.66:9031/themes/simpleboot3/public/assets/game/images/unit_hover.jpg) repeat-x;
    color: #fff;
}
.sum-ctrl .sum-title ul li.on {
    background: url(http://119.28.54.66:9031/themes/simpleboot3/public/assets/game/images/unit_hover.jpg) repeat-x;
    color: #fff;
}
.sun-con {
    overflow: hidden;
    padding-top:15px;
    height: 60px;
    margin-left: 15px;
}
/*时时彩头部*/
.louhao {
    background: url(https://066981.com/themes/simpleboot3/public/assets/game/images/nsc/lottery/louhao.png) no-repeat left center;
    padding-left: 20px;
    position: absolute;
    right: 18px;
    top: 13px;
    line-height: 20px;
    height: 20px;
}
.lottery_num {
    height: 140px;
    width: 380px;
    padding-left: 20px;
    position: relative;
    overflow: auto;
}
.lottery_history_issue {
    margin-top: 10px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #959595;
    padding-top: 5px;
}
.lottery_num_box {
    height: 45px;
}
.lottery_num_box ul {
    position: relative;
    margin: 0px auto;
}
.lottery_num_box ul li {
    position: relative;
    color: #8c5a8e;
    font-size: 24px;
    font-weight: bold;
    overflow: hidden;
    margin-right: 5px;
    margin-top: 5px;
    float: none;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    border-radius: 50%;
    background-color: #F13131;
    color: #fff !important;
}
.lottery_tab{
    width: 426px;
    height: 140px;
    position: relative;
}
.lottery_tab .td{
    float: right;
    background-color: #2f333d;
}
.lottery_tab .bd{
    float: left;
}
.lottery_tab .td li {
    text-align: center;
    width: 30px;
    height: 70px;
    color: #fff;
    font-size: 12px;
    padding: 0 8px;
    line-height: 1;
}
.lottery_tab .td li.on{
    background-color: #F13131 !important;
}
.lottery_tab .td li span {
    display: table-cell;
    width: 30px;
    height: 70px;
    vertical-align: middle;
    cursor: default;
}
.game-main{
    width:980px;
    position: relative;
    box-shadow: none;
    background: #fff;
    margin:0  auto;
}
._black {
    color: #000 !important;
}
._red {
    color: #ff0000 !important;
}
.lottery_timer {
    margin-top: 5px;
    height: 140px !important;
}
.lottery-name {
    font-size: 16px;
    color: #666;
}
.lottery_issue {
    width: auto;
    min-width: 100px;
    max-width: 130px;
    padding-left: 10px;
    padding-top: 15px;
    position: relative;
}
.lottery_issue p {
    line-height: 23px;
    font-size: 12px;
    color: #959595;
    word-break: break-all;
}
/*计时*/
.lottery_timeBox {
    width: 305px;
    margin-left: 10px;
    height: auto;
    overflow: hidden;
    padding-top: 17px;
    padding-right: 10px;
    border-right: 1px #CECECE dashed;
    padding-bottom: 30px;
}
.time-title {
    width: 100%;
    color: #e84f31;
    float: right;
    margin: 10px 0;
    text-align: center;
}
.timeBox {
    position: relative;
    width: 89px;
    height: 54px;
    float: left;
}
.dianBox {
    width: 12px;
    height: 54px;
    float: left;
    background: url(https://066981.com/themes/simpleboot3/public/assets/game/images/nsc/warp/t.png) no-repeat 2px center;
    line-height: 54px;
}
.num_left, .num_right {
    width: 20px;
    height: 36px;
    line-height: 36px;
    float: left;
    position: relative;
    width: 42px;
    height: 54px;
    color: #fff;
    background: #333;
    border-radius: 5px;
}
.num_left {
    margin-right: 5px;
}
.num_left .num {
    text-align: center;
    font-size: 46px;
    line-height: 54px;
}
.num_right .num {
    text-align: center;
    font-size: 46px;
    line-height: 54px;
}
.num_t, .num_next_t {
    width: 100%;
    height: 27px;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
}
.num_b, .num_next_b {
    width: 100%;
    height: 27px;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 18px;
    text-align: center;
}
.num_b div, .num_next_b div {
    position: absolute;
    top: -19px;
    width: 100%;
}
/*页面起始*/
.bet{
    border-left: 1px solid #F0AD4E;
}
.betTitle {
    position: relative;
    overflow-y: hidden;
    overflow-x: auto;
}
.betTitle:before {
    content: '';
    clear: both;
}
</style>

<style>
.ivu-table th:first-child,.ivu-table td:first-child
{
    width: 20%;
}
.ivu-table td,.ivu-table th{
    width: 5%;
    text-align: center;
    height: auto;
}
.ivu-table-cell{
    padding: 0;
}
</style>